<html>    
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 500px;
      }
      .cluster{
  			color: #FFFFFF;
  			text-align:center;
  			font-family: 'Arial, Helvetica';
  			font-size:11px;
  			font-weight:bold;
      }
      .cluster-1{
        background-image:url(images/m1.png);
        line-height:53px;
  			width: 53px;
  			height: 52px;
      }
      .cluster-2{
        background-image:url(images/m2.png);
        line-height:53px;
  			width: 56px;
  			height: 55px;
      }
      .cluster-3{
        background-image:url(images/m3.png);
        line-height:66px;
  			width: 66px;
  			height: 65px;
      }
    </style>
    
    <script type="text/javascript">
        
      $(function(){
        $('#test1').gmap3({ 
            map:{
              options:{
                center:[46.578498,2.457275],
                zoom: 5
              }
            },
            marker:{
              values: [
                [48.82567253451685,2.3693843749999814], //#1
                [48.82567253451685,2.2693843749999814], //#1
                [48.82567253451685,2.1693843749999814], //#1
                [48.82567253451685,2.0693843749999814], //#1
                [45.82567253451685,2.3693843749999814], //#2
                [45.82567253451685,2.2693843749999814], //#2
                [45.82567253451685,2.1693843749999814], //#2
                [45.82567253451685,2.0693843749999814], //#2
                [48.82567253451685,1.918], // #1 after average
                [47.3,1.918] // no group
              ],
              cluster:{
                radius:60,
            		// This style will be used for clusters with more than 0 markers
            		0: {
            		  content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
            			width: 53,
            			height: 52
            		},
            		// This style will be used for clusters with more than 10 markers
            		2: {
            		  content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
            			width: 56,
            			height: 55
            		},
            		// This style will be used for clusters with more than 20 markers
            		4: {
            		  content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
            			width: 66,
            			height: 65
            		}
            	}
            }
          },
          { marker:{
              values:[
                [48.8620722, 2.352047],
                [46.59433,0.342236],
                [42.704931, 2.894697]
              ]
            },
            circle:{
              values:[
                { options:{
                    center: [47.34329,5.028076],
                    radius : 250000,
                    fillColor : "#F4AFFF",
                    strokeColor : "#CB53DF"
                  }
                },
                { options:{
                    center: [47.34329,5.028076],
                    radius : 125000,
                    fillColor : "#008BB2",
                    strokeColor : "#005BB7"
                  }
                }
              ]
            },
            rectangle:{
              options:{
                bounds: {ne:[47.238965,-1.607666], sw:[48.404409,-4.508057]},
                radius : 750,
                fillColor : "#008BB2",
                strokeColor : "#005BB7"
              }
            },
            polyline:{
              values:[
                { options:{ path:[
                    [53.08478686807706, -0.443115624999999],
                    [53.242865580591584, 0.479735937500001],
                    [51.853424606562065, 0.567626562500001],
                    [52.015993653812835, -0.706787499999999],
                    [52.66039236803361, -0.179443749999999]
                  ] 
                }},
                { options:{ path:[
                    [52.63372973171113, 1.798095312500001],
                    [52.63372973171113, 3.468017187500001]
                  ] 
                }},
                { options:{ path:[
                    [53.37415340143462, 4.215087500000001],
                    [53.37415340143462, 5.753173437500001],
                    [53.031964521054995, 6.104735937500001],
                    [52.76688041593213, 5.841064062500001],
                    [52.79346182438923, 4.786376562500001],
                    [52.71366888314625, 5.885009375000001],
                    [52.31250879780346, 6.368407812500001],
                    [51.8805603577419, 6.280517187500001],
                    [51.93478275669203, 4.390868750000001],
                    [53.37415340143462, 4.215087500000001]
                  ] 
                }}
              ],
              options:{
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
              }
            }
          },
          { polygon:{
              options:{
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                paths:[	 
                  [47.23896534797107, 10.103759375000001],
                  [45.78744522454207, 10.894775000000001],
                  [45.20216719900454, 13.004150000000001],
                  [44.798208663960814, 10.894775000000001],
                  [42.76798523689034, 10.103759375000001],
                  [44.798208663960814, 9.400634375000001],
                  [45.264061876535, 7.291259375000001],
                  [45.78744522454207, 9.400634375000001]
                ] 
              }
            }
          }
        );
      });
      
      function clearThat(){
        var tg = $("#target").val(),
            wh = $("#which").val(),
            opts = {};
        if (tg != "all"){
          opts.name = tg; /* string but can be an array of name : ["marker", "polyline", ...] */
        }
        if (wh == "first"){
          opts.first = true;
        }
        if (wh == "last"){
          opts.last = true;
        }
        $('#test1').gmap3({clear:opts});
      }
    </script>
    
  <body>
    <select id="target">
      <option>all</option>
      <option>clusterer</option>
      <option>marker</option>
      <option>circle</option>
      <option>rectangle</option>
      <option>polyline</option>
      <option>polygon</option>
    </select>
    <select id="which">
      <option>all</option>
      <option>last</option>
      <option>first</option>
    </select>
    <input type="button" value="clear" onclick="clearThat();">
    <div id="test1" class="gmap3"></div>
  </body>
</html>